import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { getSystemInfo } from '@/utils';

import { mock } from '@/assets/mock'

import './index.scss';

interface CustomNavBarProps {
 title?: string;
 showBack?: boolean;
 showTransition?: boolean;
}

const { statusBarHeight, safeAreaHeight } = getSystemInfo();

const CustomNavBar: React.FC<CustomNavBarProps> = ({ title = '', showBack = true, showTransition = false }) => {
 const handleBackClick = () => {
  Taro.navigateBack();
 };

 return (
  <View
   className={`custom-navbar ${showTransition ? 'show-transition' : ''}`}
   style={{ paddingTop: `${statusBarHeight}px` }}
  >
   {showBack && (
    <View className="custom-navbar-back" onClick={handleBackClick}>
     <Image className="custom-navbar-back-icon" src={mock?.backBalckIcon} />
    </View>
   )}
   {
    showTransition && (
     <>
      <Text className="custom-navbar-title">{title}</Text>
      <View className="custom-navbar-safe-area" style={{ height: `${safeAreaHeight}px` }} />
     </>
    )
   }
  </View>
 );
};

export default CustomNavBar;
